import 'package:flutter/material.dart';

import 'package:flutter_kit_dsp/flutter_kit_dsp.dart';
import '../../tool/assets.dart';

class SlopeItem extends StatefulWidget {
  Passmodel model;
  final int flex1;
  final int flex2;
  final void Function(int) onClick;
  SlopeItem({super.key, required this.flex1, required this.flex2, required this.model, required this.onClick});

  @override
  State<SlopeItem> createState() => _SlopeItemState();
}

class _SlopeItemState extends State<SlopeItem> {
  Color _boder_color() {
    return Color_border.withOpacity(widget.model.select ? 0.5 : 1);
  }

  Color _bg_color(int num) {
    return widget.model.select == false
        ? Color_bg_btn.withOpacity(0.5)
        : widget.model.type?.slope == num
            ? Color_select_btn
            : Color_bg_btn;
  }

  Color? _text_color() {
    return widget.model.select ? Colors.white : Colors.grey;
  }

  BorderRadius _border_radius(int num) {
    if (num == widget.model.type?.slopeList.first) {
      return const BorderRadius.only(topLeft: Radius.circular(4), bottomLeft: Radius.circular(4));
    } else if (num == widget.model.type?.slopeList.last) {
      return const BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4));
    } else {
      return const BorderRadius.all(Radius.zero);
    }
  }

  ///slope item
  Widget _items(int num) {
    ///返回左右两边圆角，
    Widget borderRadius(Widget child) {
      return Container(
        decoration: BoxDecoration(
          border: Border.all(color: _boder_color(), width: 0.8),
          color: _bg_color(num),
          borderRadius: _border_radius(num),
        ),
        child: child,
      );
    }

    return Expanded(
      child: GestureDetector(
        onTap: widget.model.select ? () => widget.onClick(num) : null,
        child: borderRadius(
          Text(
            '$num',
            style: TextStyle(color: _text_color(), fontSize: 12),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Flexible(flex: widget.flex1, child: passType('SLOPE')),
        const SizedBox(width: 5),

        ///slope选择器
        Flexible(
          flex: widget.flex2,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: widget.model.type!.slopeList.map(($0) {
              return _items($0);
            }).toList(),
          ),
        ),
      ],
    );
  }
}

///slop | type | freq  的 title
Widget passType(String text) {
  return Text(
    text,
    textAlign: TextAlign.right,
    style: const TextStyle(color: Colors.white, fontSize: 12),
  );
}
